<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: black;
        }

        li {
            list-style: none;
            float: left;
        }

        .box {
            height: 380px;
            width: 900px;
            margin: 150px auto;
        }

        .pic {
            position: relative;
            width: 202px;
            height: 380px;
            margin-right: 10px;
        }

        .pic img {
            position: absolute;
            left: 0;
            top: 0;
            transition: all 1s;
        }

        .front {
            z-index: 1;
            backface-visibility: hidden;

        }

        .bottom {
            backface-visibility: hidden;
            transform: rotateY(-180deg);
        }

        .pic:hover img:nth-child(1) {
            transform: rotateY(180deg);
        }

        .pic:hover img:nth-child(2) {
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="images/1.jpg" alt="" class="front">
                    <img src="images/6.jpg" alt="" class="bottom">
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="images/2.jpg" alt="" class="front">
                    <img src="images/7.jpg" alt="" class="bottom">
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="images/3.jpg" alt="" class="front">
                    <img src="images/8.jpg" alt="" class="bottom">
                </div>
            </li>
            <li>
                <div class="pic">
                    <img src="images/4.jpg" alt="" class="front">
                    <img src="images/9.jpg" alt="" class="bottom">
                </div>
            </li>
        </ul>
    </div>

</body>

</html>